<template>
    <div class="inputWrapper">
        <!-- 动态的 class 可以用三元表达式实现 -->
        <!-- :class="isOk ? '' : 'error'" -->
        <!-- 还可以用 vue 提供的对象形式来声明 -->
        <!-- 对象里面的属性以 key: value 声明 -->
        <!-- className: 是否添加这个类名的判断 -->
        <input
            @blur="showErrMsg"
            :class="{
                error: !isOk,
            }"
            :placeholder="placeholder"
            :type="type"
            v-model="value"
        />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: "",
                isOk: true,
            };
        },
        props: ["placeholder", "type", "rule", "errMsg"],
        watch: {
            value(newValue) {
                // 这里是格式校验
                if (this.rule.test(newValue)) {
                    console.log("合法");
                    this.isOk = true;
                } else {
                    console.log(this.errMsg);
                    this.isOk = false;
                }

                // 校验以后, 其实这个数据是父组件发请求时需要用的
                // 我们要把数据往父组件发出去
                this.$emit("setValue", newValue);
            },
        },
        methods: {
            showErrMsg() {
                if (!this.isOk) {
                    // alert(this.errMsg);
                    this.$toast(this.errMsg);
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .inputWrapper {
        input {
            font-size: 18 /360 * 100vw;
            line-height: 40 /360 * 100vw;
            margin-bottom: 10 /360 * 100vw;
            border: none;
            border-bottom: 1px solid #333;
            outline: none;
            width: 100%;
        }
        .error {
            border-color: red;
        }
    }
</style>